<template>
  <div>
    <tableComponents
      :pagination="{ currentPage, pageSize, total: list.all_num }"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @sendUserSearch="getSearch"
      :searchData="userSearchData"
      :isHaveExport="false"
      :isHaveAdd="false"
    >
      <template v-slot:table>
        <el-table
          ref="multipleTable"
          :data="list.data"
          v-loading="loading"
          header-row-class-name="head_color"
          stripe
          tooltip-effect="dark"
          style="width: 99.9%"
        >
          <el-table-column label="用户账号" min-width="160">
            <template slot-scope="scope">
              <div
                class="fx"
                style="justify-content: flex-start"
                v-if="scope.row.uid > 0"
              >
                <div class="tc" style="margin-right: 20px">
                  <img
                    style="width: 50px; height: 50px"
                    :src="imgError(scope.row.avatar)"
                    class="user_img"
                  />
                </div>
                <div class="user_table">
                  <p>
                    <span>账号/手机号：</span>
                    <small>{{ scope.row.username || "---" }}</small>
                  </p>
                  <p>
                    <span>昵称：</span>
                    <small>{{ scope.row.nickname || "---" }}</small>
                  </p>
                </div>
              </div>
              <div class="user_table" v-else>暂未关联</div>
            </template>
          </el-table-column>

          <!-- 
        $this->cj('iorder_invoice', '订单发票');
        $this->add('iorder_invoice', 'uid', 'i', '用户ID');
        $this->add('iorder_invoice', 'oid', 'v', '订单ID');
        $this->add('iorder_invoice', 'email', 'v', '电子邮箱');
        $this->add('iorder_invoice', 'types', 'v', '发票类型');
        $this->add('iorder_invoice', 'header', 'v', '发票抬头');
        $this->add('iorder_invoice', 'tax', 'v', '纳税人识别号');
        $this->add('iorder_invoice', 'content', 'v', '发票内容');
        $this->add('iorder_invoice', 'money', 'd', '发票金额');
        $this->add('iorder_invoice', 'tel', 'v', '企业电话');
        $this->add('iorder_invoice', 'bank', 'v', '开户银行');
        $this->add('iorder_invoice', 'account', 'v', '银行账户');
        $this->add('iorder_invoice', 'address', 'v', '企业地址');
        $this->add('iorder_invoice', 'status', 's', '状态0申请中1已开票');
        $this->add('iorder_invoice', 'remark', 'v', '备注'); -->

          <el-table-column label="开票信息" min-width="140">
            <template slot-scope="scope">
              <div class="user_table">
                <p>
                  <span>发票类型：</span>
                  <small>{{ scope.row.types || "---" }}</small>
                </p>
                <p>
                  <span>发票抬头：</span>
                  <small>{{ scope.row.header || "---" }}</small>
                </p>
                <p>
                  <span>纳号：</span>
                  <small>{{ scope.row.tax || "---" }}</small>
                </p>
                <p>
                  <span>发票内容：</span>
                  <small>{{ scope.row.content || "---" }}</small>
                </p>
                <p>
                  <span>订单号：</span>
                  <small>{{ scope.row.order_id || "---" }}</small>
                </p>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="开票金额" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.money | keepTwoNum }}
            </template>
          </el-table-column>

          <el-table-column label="其他信息" min-width="160">
            <template slot-scope="scope">
              <div class="user_table">
                <p>
                  <span>单位地址：</span>
                  <small>{{ scope.row.address || "---" }}</small>
                </p>
                <p>
                  <span>电话号码：</span>
                  <small>{{ scope.row.tel || "---" }}</small>
                </p>
                <p>
                  <span>开户银行：</span>
                  <small>{{ scope.row.bank || "---" }}</small>
                </p>
                <p>
                  <span>银行账户：</span>
                  <small>{{ scope.row.account || "---" }}</small>
                </p>
                <p>
                  <span>备注：</span>
                  <small>{{ scope.row.remark || "---" }}</small>
                </p>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="邮箱" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.email || "---" }}
            </template>
          </el-table-column>

          <el-table-column label="状态" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.status == 1 ? "已开票" : "申请中" }}
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="140" align="center">
            <template slot-scope="scope">
              <el-button
                :loading="$store.state.isLoading"
                type="primary"
                size="mini"
                :disabled="scope.row.status == 1"
                @click="editBtn(scope.row.id)"
              >
                开票
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>

  </div>
</template>

<script>
import { order_invoiceSearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据
export default {
  data() {
    return {
      userSearchData: order_invoiceSearchData,
      searchAll: {},
      loading: false,
      list: [],
      pageSize: 10,
      currentPage: 1,
      editInfo: {},
      show_edit: false,
    };
  },
  created() {
    this.getNewsAll();
  },
  methods: {
    editBtn(id) {
      this.$swal({
        title: "您确定要开票这条信息吗",
        text: "开票后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要开票",
        cancelButtonText: "容我三思",
      }).then((willDelete) => {
        if (willDelete.value) {
          var data = { id: id };
          this.$api.getStation.order_invoice_saveedit(data).then((res) => {
            if (res.data.code == 200) {
              this.$fnc.alertSuccess({ text: "操作成功" });
              this.getNewsAll(this.searchAll);
            } else {
              this.$fnc.alertError(res.data.code_desc, res.data.result);
            }
          });
        }
      });
    },
    getSearch(obj) {
      this.searchAll = obj;
      this.getNewsAll(obj);
    },
    handleSizeChange(val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;
      this.getNewsAll(params);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      var params = this.searchAll;
      params.page = val;
      params.page_size = this.pageSize;
      this.getNewsAll(params);
    },
    getNewsAll(data) {
      this.loading = true;
      var params = {};
      data = data || {};
      params = data;

      this.$api.getStation.order_invoice_lists(params).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
        this.loading = false;
      });
    },
    imgError(item) {
      if (!item) {
        return require("@/assets/img/default_head.png");
      }
      return item;
    },
  },
};
</script>

<style>
</style>